<template>
  <div class="production-scheduling">
    <!-- 页面标题和操作 -->
    <div class="page-header">
      <div class="header-left">
        <h1>生产调度</h1>
        <p>生产计划排程、资源分配和进度跟踪</p>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="autoSchedule">
          <el-icon><MagicStick /></el-icon>
          自动排程
        </el-button>
        <el-button @click="optimizeSchedule">
          <el-icon><TrendCharts /></el-icon>
          优化排程
        </el-button>
        <el-button @click="exportSchedule">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
      </div>
    </div>

    <!-- 调度概览 -->
    <div class="schedule-overview">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="overview-card">
            <div class="overview-content">
              <div class="overview-icon total">
                <el-icon><List /></el-icon>
              </div>
              <div class="overview-info">
                <div class="overview-number">{{ scheduleStats.totalTasks }}</div>
                <div class="overview-label">总任务数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="overview-card">
            <div class="overview-content">
              <div class="overview-icon scheduled">
                <el-icon><Calendar /></el-icon>
              </div>
              <div class="overview-info">
                <div class="overview-number">{{ scheduleStats.scheduledTasks }}</div>
                <div class="overview-label">已排程任务</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="overview-card">
            <div class="overview-content">
              <div class="overview-icon utilization">
                <el-icon><PieChart /></el-icon>
              </div>
              <div class="overview-info">
                <div class="overview-number">{{ scheduleStats.resourceUtilization }}%</div>
                <div class="overview-label">资源利用率</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="overview-card">
            <div class="overview-content">
              <div class="overview-icon efficiency">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <div class="overview-info">
                <div class="overview-number">{{ scheduleStats.efficiency }}%</div>
                <div class="overview-label">调度效率</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 视图切换和筛选 -->
    <el-card class="control-card">
      <div class="control-header">
        <div class="view-tabs">
          <el-radio-group v-model="currentView" @change="handleViewChange">
            <el-radio-button label="gantt">甘特图</el-radio-button>
            <el-radio-button label="kanban">看板视图</el-radio-button>
            <el-radio-button label="calendar">日历视图</el-radio-button>
            <el-radio-button label="resource">资源视图</el-radio-button>
          </el-radio-group>
        </div>
        
        <div class="control-actions">
          <el-form :model="filterForm" inline>
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="filterForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                @change="handleDateRangeChange"
              />
            </el-form-item>
            <el-form-item label="车间">
              <el-select v-model="filterForm.workshop" placeholder="全部" clearable @change="handleFilterChange">
                <el-option label="装配车间" value="assembly" />
                <el-option label="机加工车间" value="machining" />
                <el-option label="包装车间" value="packaging" />
                <el-option label="测试车间" value="testing" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="refreshSchedule">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>

    <!-- 甘特图视图 -->
    <el-card v-show="currentView === 'gantt'" class="gantt-card">
      <template #header>
        <div class="card-header">
          <span>甘特图调度</span>
          <div class="gantt-controls">
            <el-button-group>
              <el-button :type="ganttScale === 'day' ? 'primary' : ''" @click="setGanttScale('day')">日</el-button>
              <el-button :type="ganttScale === 'week' ? 'primary' : ''" @click="setGanttScale('week')">周</el-button>
              <el-button :type="ganttScale === 'month' ? 'primary' : ''" @click="setGanttScale('month')">月</el-button>
            </el-button-group>
          </div>
        </div>
      </template>
      
      <div class="gantt-container">
        <div class="gantt-sidebar">
          <div class="gantt-header">任务</div>
          <div class="gantt-tasks">
            <div
              v-for="task in ganttTasks"
              :key="task.id"
              class="gantt-task-row"
              :class="{ 'task-selected': selectedTask?.id === task.id }"
              @click="selectTask(task)"
            >
              <div class="task-info">
                <div class="task-name">{{ task.name }}</div>
                <div class="task-meta">{{ task.workshop }} | {{ task.duration }}天</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="gantt-timeline">
          <div class="gantt-header">
            <div class="timeline-scale">
              <div
                v-for="date in timelineScale"
                :key="date"
                class="scale-item"
              >
                {{ formatScaleDate(date) }}
              </div>
            </div>
          </div>
          
          <div class="gantt-chart">
            <div
              v-for="task in ganttTasks"
              :key="task.id"
              class="gantt-bar-row"
            >
              <div
                class="gantt-bar"
                :style="getGanttBarStyle(task)"
                :class="`priority-${task.priority}`"
                @click="selectTask(task)"
              >
                <div class="bar-content">
                  <span class="bar-text">{{ task.progress }}%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 看板视图 -->
    <el-card v-show="currentView === 'kanban'" class="kanban-card">
      <template #header>
        <span>看板调度</span>
      </template>
      
      <div class="kanban-container">
        <div class="kanban-column" v-for="column in kanbanColumns" :key="column.id">
          <div class="column-header">
            <h3>{{ column.title }}</h3>
            <el-badge :value="column.tasks.length" class="column-badge" />
          </div>
          
          <div class="column-content">
            <div
              v-for="task in column.tasks"
              :key="task.id"
              class="kanban-task"
              :class="`priority-${task.priority}`"
              draggable="true"
              @dragstart="handleDragStart(task)"
              @dragover.prevent
              @drop="handleDrop(column.id)"
            >
              <div class="task-header">
                <span class="task-title">{{ task.name }}</span>
                <el-tag :type="getPriorityType(task.priority)" size="small">{{ task.priority }}</el-tag>
              </div>
              
              <div class="task-details">
                <div class="task-meta">
                  <el-icon><Factory /></el-icon>
                  <span>{{ getWorkshopText(task.workshop) }}</span>
                </div>
                <div class="task-meta">
                  <el-icon><Clock /></el-icon>
                  <span>{{ task.duration }}天</span>
                </div>
              </div>
              
              <div class="task-progress">
                <el-progress :percentage="task.progress" :stroke-width="6" />
              </div>
              
              <div class="task-footer">
                <div class="task-assignee">
                  <el-avatar :size="24" :src="task.assigneeAvatar">{{ task.assignee }}</el-avatar>
                  <span>{{ task.assignee }}</span>
                </div>
                <div class="task-date">{{ task.endDate }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 日历视图 -->
    <el-card v-show="currentView === 'calendar'" class="calendar-card">
      <template #header>
        <span>日历调度</span>
      </template>
      
      <el-calendar v-model="calendarDate">
        <template #date-cell="{data}">
          <div class="calendar-cell">
            <div class="cell-date">{{ data.day.split('-').slice(2).join('-') }}</div>
            <div class="cell-tasks">
              <div
                v-for="task in getTasksForDate(data.day)"
                :key="task.id"
                class="calendar-task"
                :class="`priority-${task.priority}`"
              >
                {{ task.name }}
              </div>
            </div>
          </div>
        </template>
      </el-calendar>
    </el-card>

    <!-- 资源视图 -->
    <el-card v-show="currentView === 'resource'" class="resource-card">
      <template #header>
        <span>资源分配</span>
      </template>
      
      <div class="resource-container">
        <div class="resource-list">
          <div
            v-for="resource in resources"
            :key="resource.id"
            class="resource-item"
            :class="{ 'resource-selected': selectedResource?.id === resource.id }"
            @click="selectResource(resource)"
          >
            <div class="resource-info">
              <div class="resource-name">{{ resource.name }}</div>
              <div class="resource-type">{{ resource.type }}</div>
            </div>
            <div class="resource-utilization">
              <el-progress
                :percentage="resource.utilization"
                :color="getUtilizationColor(resource.utilization)"
                :stroke-width="8"
              />
            </div>
          </div>
        </div>
        
        <div class="resource-chart">
          <div ref="resourceChartRef" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </el-card>

    <!-- 任务详情对话框 -->
    <el-dialog
      v-model="taskDialogVisible"
      title="任务详情"
      width="800px"
    >
      <div v-if="selectedTask" class="task-detail">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="任务名称">{{ selectedTask.name }}</el-descriptions-item>
          <el-descriptions-item label="工单编号">{{ selectedTask.workOrderNo }}</el-descriptions-item>
          <el-descriptions-item label="车间">{{ getWorkshopText(selectedTask.workshop) }}</el-descriptions-item>
          <el-descriptions-item label="优先级">
            <el-tag :type="getPriorityType(selectedTask.priority)">{{ selectedTask.priority }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ selectedTask.startDate }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ selectedTask.endDate }}</el-descriptions-item>
          <el-descriptions-item label="持续时间">{{ selectedTask.duration }}天</el-descriptions-item>
          <el-descriptions-item label="进度">{{ selectedTask.progress }}%</el-descriptions-item>
          <el-descriptions-item label="负责人" :span="2">{{ selectedTask.assignee }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="task-actions" style="margin-top: 20px;">
          <el-button type="primary" @click="editTaskSchedule">调整排程</el-button>
          <el-button @click="reassignTask">重新分配</el-button>
          <el-button type="warning" @click="prioritizeTask">提升优先级</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  MagicStick,
  TrendCharts,
  Download,
  List,
  Calendar,
  PieChart,
  DataAnalysis,
  Refresh,
  Operation,
  Clock
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 响应式数据
const currentView = ref('gantt')
const ganttScale = ref('day')
const calendarDate = ref(new Date())
const taskDialogVisible = ref(false)
const selectedTask = ref(null)
const selectedResource = ref(null)
const resourceChartRef = ref(null)
const draggedTask = ref(null)

// 调度统计
const scheduleStats = reactive({
  totalTasks: 24,
  scheduledTasks: 18,
  resourceUtilization: 78,
  efficiency: 85
})

// 筛选表单
const filterForm = reactive({
  dateRange: [],
  workshop: ''
})

// 甘特图任务数据
const ganttTasks = ref([
  {
    id: 1,
    name: '智能手机主板生产',
    workOrderNo: 'WO202501001',
    workshop: 'assembly',
    priority: '高',
    startDate: '2025-01-20',
    endDate: '2025-01-25',
    duration: 5,
    progress: 60,
    assignee: '张三',
    assigneeAvatar: ''
  },
  {
    id: 2,
    name: '电源适配器加工',
    workOrderNo: 'WO202501002',
    workshop: 'machining',
    priority: '中',
    startDate: '2025-01-22',
    endDate: '2025-01-28',
    duration: 6,
    progress: 30,
    assignee: '李四',
    assigneeAvatar: ''
  },
  {
    id: 3,
    name: '数据线包装',
    workOrderNo: 'WO202501003',
    workshop: 'packaging',
    priority: '低',
    startDate: '2025-01-25',
    endDate: '2025-01-27',
    duration: 2,
    progress: 90,
    assignee: '王五',
    assigneeAvatar: ''
  },
  {
    id: 4,
    name: '保护壳测试',
    workOrderNo: 'WO202501004',
    workshop: 'testing',
    priority: '中',
    startDate: '2025-01-26',
    endDate: '2025-01-30',
    duration: 4,
    progress: 15,
    assignee: '赵六',
    assigneeAvatar: ''
  }
])

// 看板列数据
const kanbanColumns = ref([
  {
    id: 'pending',
    title: '待开始',
    tasks: [
      {
        id: 5,
        name: '耳机组装',
        workOrderNo: 'WO202501005',
        workshop: 'assembly',
        priority: '中',
        duration: 3,
        progress: 0,
        assignee: '钱七',
        assigneeAvatar: '',
        endDate: '2025-02-01'
      }
    ]
  },
  {
    id: 'inProgress',
    title: '进行中',
    tasks: ganttTasks.value.filter(task => task.progress > 0 && task.progress < 100)
  },
  {
    id: 'completed',
    title: '已完成',
    tasks: ganttTasks.value.filter(task => task.progress === 100)
  },
  {
    id: 'delayed',
    title: '延期',
    tasks: []
  }
])

// 资源数据
const resources = ref([
  {
    id: 1,
    name: '装配线A',
    type: '生产线',
    utilization: 85,
    capacity: 100,
    currentLoad: 85
  },
  {
    id: 2,
    name: '数控机床B',
    type: '设备',
    utilization: 72,
    capacity: 100,
    currentLoad: 72
  },
  {
    id: 3,
    name: '包装线C',
    type: '生产线',
    utilization: 45,
    capacity: 100,
    currentLoad: 45
  },
  {
    id: 4,
    name: '测试台D',
    type: '设备',
    utilization: 90,
    capacity: 100,
    currentLoad: 90
  }
])

// 时间轴刻度
const timelineScale = ref([])

// 生成时间轴
const generateTimelineScale = () => {
  const start = new Date('2025-01-20')
  const end = new Date('2025-02-10')
  const scale = []
  
  for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
    scale.push(new Date(d))
  }
  
  timelineScale.value = scale
}

// 格式化刻度日期
const formatScaleDate = (date) => {
  if (ganttScale.value === 'day') {
    return `${date.getMonth() + 1}/${date.getDate()}`
  } else if (ganttScale.value === 'week') {
    return `第${Math.ceil(date.getDate() / 7)}周`
  } else {
    return `${date.getMonth() + 1}月`
  }
}

// 获取甘特图条样式
const getGanttBarStyle = (task) => {
  const startDate = new Date(task.startDate)
  const endDate = new Date(task.endDate)
  const timelineStart = new Date('2025-01-20')
  
  const startOffset = Math.max(0, (startDate - timelineStart) / (1000 * 60 * 60 * 24))
  const duration = (endDate - startDate) / (1000 * 60 * 60 * 24) + 1
  
  const cellWidth = 60 // 每天的宽度
  const left = startOffset * cellWidth
  const width = duration * cellWidth
  
  return {
    left: `${left}px`,
    width: `${width}px`
  }
}

// 获取指定日期的任务
const getTasksForDate = (date) => {
  return ganttTasks.value.filter(task => {
    const taskStart = new Date(task.startDate)
    const taskEnd = new Date(task.endDate)
    const currentDate = new Date(date)
    
    return currentDate >= taskStart && currentDate <= taskEnd
  })
}

// 获取优先级类型
const getPriorityType = (priority) => {
  const priorityMap = {
    '高': 'danger',
    '中': 'warning',
    '低': 'info'
  }
  return priorityMap[priority] || 'info'
}

// 获取车间文本
const getWorkshopText = (workshop) => {
  const workshopMap = {
    assembly: '装配车间',
    machining: '机加工车间',
    packaging: '包装车间',
    testing: '测试车间'
  }
  return workshopMap[workshop] || workshop
}

// 获取利用率颜色
const getUtilizationColor = (utilization) => {
  if (utilization >= 90) return '#f56c6c'
  if (utilization >= 70) return '#e6a23c'
  return '#67c23a'
}

// 事件处理函数
const handleViewChange = (view) => {
  if (view === 'resource') {
    nextTick(() => {
      initResourceChart()
    })
  }
}

const handleDateRangeChange = () => {
  refreshSchedule()
}

const handleFilterChange = () => {
  refreshSchedule()
}

const setGanttScale = (scale) => {
  ganttScale.value = scale
  generateTimelineScale()
}

const selectTask = (task) => {
  selectedTask.value = task
  taskDialogVisible.value = true
}

const selectResource = (resource) => {
  selectedResource.value = resource
}

const handleDragStart = (task) => {
  draggedTask.value = task
}

const handleDrop = (columnId) => {
  if (draggedTask.value) {
    // 移动任务到新列
    ElMessage.success(`任务 ${draggedTask.value.name} 已移动到 ${columnId}`)
    draggedTask.value = null
  }
}

const autoSchedule = () => {
  ElMessage.success('自动排程功能开发中')
}

const optimizeSchedule = () => {
  ElMessage.success('优化排程功能开发中')
}

const exportSchedule = () => {
  ElMessage.success('导出排程功能开发中')
}

const refreshSchedule = () => {
  ElMessage.success('刷新排程数据')
}

const editTaskSchedule = () => {
  ElMessage.info('调整排程功能开发中')
}

const reassignTask = () => {
  ElMessage.info('重新分配功能开发中')
}

const prioritizeTask = () => {
  ElMessage.info('提升优先级功能开发中')
}

// 初始化资源图表
const initResourceChart = () => {
  if (!resourceChartRef.value) return
  
  const chart = echarts.init(resourceChartRef.value)
  
  const option = {
    title: {
      text: '资源利用率趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['装配线A', '数控机床B', '包装线C', '测试台D'],
      bottom: 0
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: '装配线A',
        type: 'line',
        data: [85, 88, 82, 90, 85, 78, 80],
        smooth: true
      },
      {
        name: '数控机床B',
        type: 'line',
        data: [72, 75, 70, 78, 72, 68, 70],
        smooth: true
      },
      {
        name: '包装线C',
        type: 'line',
        data: [45, 48, 42, 50, 45, 40, 43],
        smooth: true
      },
      {
        name: '测试台D',
        type: 'line',
        data: [90, 92, 88, 95, 90, 85, 87],
        smooth: true
      }
    ]
  }
  
  chart.setOption(option)
  
  // 响应式调整
  window.addEventListener('resize', () => {
    chart.resize()
  })
}

// 生命周期
onMounted(() => {
  generateTimelineScale()
})
</script>

<style scoped>
.production-scheduling {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.header-left h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.header-left p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.header-right {
  display: flex;
  gap: 12px;
}

.schedule-overview {
  margin-bottom: 20px;
}

.overview-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.overview-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.overview-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.overview-icon.total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.overview-icon.scheduled {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.overview-icon.utilization {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.overview-icon.efficiency {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.overview-info {
  flex: 1;
}

.overview-number {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
}

.overview-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.control-card,
.gantt-card,
.kanban-card,
.calendar-card,
.resource-card {
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 甘特图样式 */
.gantt-container {
  display: flex;
  overflow-x: auto;
}

.gantt-sidebar {
  width: 250px;
  flex-shrink: 0;
  border-right: 1px solid #ebeef5;
}

.gantt-header {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
  font-weight: 600;
}

.gantt-tasks {
  max-height: 400px;
  overflow-y: auto;
}

.gantt-task-row {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: background-color 0.2s;
}

.gantt-task-row:hover,
.gantt-task-row.task-selected {
  background-color: #f0f9ff;
}

.task-info {
  flex: 1;
}

.task-name {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.task-meta {
  font-size: 12px;
  color: #909399;
}

.gantt-timeline {
  flex: 1;
  min-width: 800px;
}

.timeline-scale {
  height: 50px;
  display: flex;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
}

.scale-item {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ebeef5;
  font-size: 12px;
  color: #606266;
}

.gantt-chart {
  position: relative;
  max-height: 400px;
  overflow-y: auto;
}

.gantt-bar-row {
  height: 50px;
  position: relative;
  border-bottom: 1px solid #ebeef5;
}

.gantt-bar {
  position: absolute;
  top: 10px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.gantt-bar.priority-高 {
  background: linear-gradient(135deg, #f56c6c 0%, #ff8a80 100%);
}

.gantt-bar.priority-中 {
  background: linear-gradient(135deg, #e6a23c 0%, #ffb74d 100%);
}

.gantt-bar.priority-低 {
  background: linear-gradient(135deg, #67c23a 0%, #81c784 100%);
}

.gantt-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bar-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: white;
  font-size: 12px;
  font-weight: 500;
}

/* 看板样式 */
.kanban-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px 0;
}

.kanban-column {
  min-width: 280px;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.column-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.column-content {
  min-height: 400px;
}

.kanban-task {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: move;
  transition: all 0.2s;
}

.kanban-task:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.task-title {
  font-weight: 500;
  color: #303133;
  flex: 1;
  margin-right: 8px;
}

.task-details {
  margin-bottom: 12px;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.task-progress {
  margin-bottom: 12px;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-assignee {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #606266;
}

.task-date {
  font-size: 12px;
  color: #909399;
}

/* 日历样式 */
.calendar-cell {
  height: 100%;
  padding: 4px;
}

.cell-date {
  font-weight: 500;
  margin-bottom: 4px;
}

.cell-tasks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calendar-task {
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-task.priority-高 {
  background-color: #f56c6c;
}

.calendar-task.priority-中 {
  background-color: #e6a23c;
}

.calendar-task.priority-低 {
  background-color: #67c23a;
}

/* 资源视图样式 */
.resource-container {
  display: flex;
  gap: 20px;
}

.resource-list {
  width: 300px;
  flex-shrink: 0;
}

.resource-item {
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.resource-item:hover,
.resource-item.resource-selected {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.resource-info {
  margin-bottom: 12px;
}

.resource-name {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.resource-type {
  font-size: 12px;
  color: #909399;
}

.resource-chart {
  flex: 1;
}

.task-detail {
  padding: 20px 0;
}

.task-actions {
  display: flex;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .production-scheduling {
    padding: 12px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  
  .control-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .view-tabs {
    margin-bottom: 16px;
  }
  
  .gantt-container {
    flex-direction: column;
  }
  
  .gantt-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ebeef5;
  }
  
  .kanban-container {
    flex-direction: column;
  }
  
  .kanban-column {
    min-width: auto;
  }
  
  .resource-container {
    flex-direction: column;
  }
  
  .resource-list {
    width: 100%;
  }
}
</style>